<template>
  <div class="work-container">
    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="container">
        <div class="search-card">
          <h2 class="search-title">寻找理想职位</h2>
          <div class="search-input-group">
            <input 
              type="text" 
              class="form-control search-input" 
              placeholder="搜索职位名称、公司名称或关键词..." 
              v-model="searchParams.keyword"
              @keyup.enter="handleSearch"
            >
            <button class="btn btn-primary search-btn" @click="handleSearch">
              <i class="bi bi-search"></i> 搜索
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="container main-content">
      <div class="row">
        <!-- 左侧筛选区域 -->
        <div class="col-lg-3">
          <div class="filter-card">
            <h4 class="filter-title">
              <i class="bi bi-funnel-fill me-2 text-primary"></i>
              <span class="fw-bold text-primary">筛选条件</span>
            </h4>
            
            <!-- 工作类型筛选 -->
            <div class="filter-group">
              <label class="filter-label">工作类型</label>
              <select class="form-select filter-select" v-model="searchParams.jobType">
                <option value="">全部类型</option>
                <option value="internship">实习</option>
                <option value="part_time">兼职</option>
                <option value="full_time">全职</option>
              </select>
            </div>

            <!-- 行业领域筛选 -->
            <div class="filter-group">
              <label class="filter-label">行业领域</label>
              <select class="form-select filter-select" v-model="searchParams.industry">
                <option value="">全部行业</option>
                <option value="internet">互联网/IT</option>
                <option value="finance">金融/银行</option>
                <option value="education">教育/培训</option>
                <option value="media">媒体/广告</option>
                <option value="manufacturing">制造业</option>
                <option value="service">服务业</option>
                <option value="other">其他</option>
              </select>
            </div>

            <!-- 工作地点筛选 -->
            <div class="filter-group">
              <label class="filter-label">工作地点</label>
              <input 
                type="text" 
                class="form-control filter-input" 
                placeholder="输入工作地点" 
                v-model="searchParams.workLocation"
              >
            </div>

            <!-- 工作方式筛选 -->
            <div class="filter-group">
              <label class="filter-label">工作方式</label>
              <select class="form-select filter-select" v-model="searchParams.workMode">
                <option value="">全部方式</option>
                <option value="on_site">现场办公</option>
                <option value="remote">远程办公</option>
                <option value="hybrid">混合办公</option>
              </select>
            </div>

            <!-- 学历要求筛选 -->
            <div class="filter-group">
              <label class="filter-label">学历要求</label>
              <select class="form-select filter-select" v-model="searchParams.educationRequirement">
                <option value="">不限</option>
                <option value="none">不限</option>
                <option value="high_school">高中及以上</option>
                <option value="college">大专及以上</option>
                <option value="bachelor">本科及以上</option>
                <option value="master">硕士及以上</option>
                <option value="doctor">博士及以上</option>
              </select>
            </div>

            <!-- 毕业年份筛选 -->
            <div class="filter-group">
              <label class="filter-label">毕业年份要求</label>
              <input 
                type="text" 
                class="form-control filter-input" 
                placeholder="例如：2026届" 
                v-model="searchParams.graduationYear"
              >
            </div>

            <!-- 薪资范围筛选 -->
            <div class="filter-group">
              <label class="filter-label">薪资范围</label>
              <div class="salary-range">
                <input 
                  type="number" 
                  class="form-control range-input" 
                  placeholder="最低" 
                  v-model.number="searchParams.minSalary"
                >
                <span class="range-separator">-</span>
                <input 
                  type="number" 
                  class="form-control range-input" 
                  placeholder="最高" 
                  v-model.number="searchParams.maxSalary"
                >
              </div>
            </div>

            <!-- 职位标签筛选 -->
            <div class="filter-group">
              <label class="filter-label">职位标签</label>
              <input 
                type="text" 
                class="form-control filter-input" 
                placeholder="输入标签关键词" 
                v-model="searchParams.jobTags"
              >
            </div>

            <!-- 筛选按钮 -->
            <div class="filter-actions">
              <button class="btn btn-primary apply-filter" @click="handleSearch">
                应用筛选
              </button>
              <button class="btn btn-outline-secondary reset-filter" @click="resetFilters">
                重置筛选
              </button>
            </div>
          </div>
        </div>

        <!-- 中间职位列表区域  -->
        <div class="col-lg-9">
          <div class="jobs-section">
            <div class="jobs-header">
              <h4 class="jobs-title">
                <i class="bi bi-briefcase-fill me-2 text-primary"></i>
                <span class="fw-bold text-primary">职位列表</span>
              </h4>
              <div class="sort-options">
                <select class="form-select sort-select" v-model="sortBy">
                  <option value="createTime">最新发布</option>
                  <option value="viewCount">最多浏览</option>
                  <option value="salary">最高薪资</option>
                </select>
              </div>
            </div>

            <!-- 职位列表 -->
            <div 
              class="jobs-list" 
              ref="jobsList"
              @scroll="handleScroll"
            >
              <div v-if="loading" class="loading-spinner">
                <div class="spinner-border text-primary" role="status">
                  <span class="visually-hidden">加载中...</span>
                </div>
              </div>

              <div v-else-if="displayedJobs.length === 0" class="no-results">
                <i class="bi bi-search no-results-icon"></i>
                <p class="no-results-text">暂无符合条件的职位</p>
                <button class="btn btn-outline-primary" @click="resetFilters">
                  重置筛选条件
                </button>
              </div>

              <div v-else>
                <!-- 职位卡片网格布局 -->
                <div class="jobs-grid row">
                  <div 
                    v-for="job in displayedJobs" 
                    :key="job.id" 
                    class="col-xl-4 col-md-6 mb-4"
                    @click="viewJobDetail(job.id)"
                  >
                    <div class="job-card h-100">
                      <div class="job-header">
                        <h5 class="job-title">{{ job.jobTitle }}</h5>
                        <span class="job-type" :class="getJobTypeClass(job.jobType)">
                          {{ getJobTypeText(job.jobType) }}
                        </span>
                      </div>
                      
                      <div class="company-info">
                        <span class="company-name">{{ job.companyName }}</span>
                        <span class="industry">{{ getIndustryText(job.industry) }}</span>
                      </div>
                      
                      <div class="job-details">
                        <div class="detail-item">
                          <i class="bi bi-geo-alt"></i>
                          <span>{{ job.workLocation }}</span>
                        </div>
                        <div class="detail-item">
                          <i class="bi bi-briefcase"></i>
                          <span>{{ getWorkModeText(job.workMode) }}</span>
                        </div>
                        <div class="detail-item">
                          <i class="bi bi-mortarboard"></i>
                          <span>{{ getEducationText(job.educationRequirement) }}</span>
                        </div>
                      </div>
                      
                      <div class="salary-tags">
                        <div class="salary" v-if="job.salaryType !== 'negotiable' && job.salaryType !== 'unpaid'">
                          {{ formatSalary(job) }}
                        </div>
                        <div class="salary" v-else>
                          {{ getSalaryTypeText(job.salaryType) }}
                        </div>
                        <div class="tags">
                          <span 
                            v-for="(tag, index) in getJobTags(job)" 
                            :key="index" 
                            class="tag"
                          >
                            {{ tag }}
                          </span>
                        </div>
                      </div>
                      
                      <div class="job-footer">
                        <div class="post-info">
                          <span class="post-time">{{ formatTime(job.createdAt) }}</span>
                          <span class="view-count">
                            <i class="bi bi-eye"></i> {{ job.viewCount || 0 }}
                          </span>
                        </div>
                        <div class="urgency" v-if="job.urgencyLevel === 'high'">
                          <span class="urgent-badge">紧急招聘</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 加载更多提示 -->
                <div v-if="hasMoreJobs" class="load-more">
                  <div class="loading-more" v-if="loadingMore">
                    <div class="spinner-border spinner-border-sm" role="status">
                      <span class="visually-hidden">加载中...</span>
                    </div>
                    <span>正在加载更多职位...</span>
                  </div>
                  <div v-else class="scroll-hint">
                    <i class="bi bi-arrow-down"></i>
                    <span>继续滚动加载更多</span>
                  </div>
                </div>

                <div v-else-if="displayedJobs.length > 0" class="no-more-jobs">
                  <i class="bi bi-check-circle"></i>
                  <span>已显示所有职位</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部帖子区域 -->
      <div class="row mt-4">
        <div class="col-12">
          <div class="posts-section">
            <div class="row">
              <!-- 最热帖子 -->
              <div class="col-md-6">
                <div class="sidebar-card">
                  <div class="sidebar-header">
                    <h5 class="sidebar-title">
                      <i class="bi bi-fire text-danger"></i>
                      最热帖子
                    </h5>
                  </div>
                  <div class="sidebar-content">
                    <div v-if="hotPostsLoading" class="loading-small">
                      <div class="spinner-border spinner-border-sm" role="status">
                        <span class="visually-hidden">加载中...</span>
                      </div>
                    </div>
                    <div v-else-if="hotPosts.length === 0" class="no-posts">
                      <p>暂无热门帖子</p>
                    </div>
                    <div v-else>
                      <div 
                        v-for="(post, index) in hotPosts" 
                        :key="post.id" 
                        class="sidebar-item"
                        @click="viewJobDetail(post.id)"
                        style="position: relative;"
                      >
                        <div class="post-rank" v-if="index < 3">{{ index + 1 }}</div>
                        <h6 class="post-title">{{ post.jobTitle || '无标题' }}</h6>
                        <div class="post-meta">
                          <span class="views">
                            <i class="bi bi-eye"></i> {{ post.viewCount || 0 }}
                          </span>
                          <span class="time">{{ formatTime(post.createdAt) }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 最近帖子 -->
              <div class="col-md-6">
                <div class="sidebar-card">
                  <div class="sidebar-header">
                    <h5 class="sidebar-title">
                      <i class="bi bi-clock text-primary"></i>
                      最近帖子
                    </h5>
                  </div>
                  <div class="sidebar-content">
                    <div v-if="recentPostsLoading" class="loading-small">
                      <div class="spinner-border spinner-border-sm" role="status">
                        <span class="visually-hidden">加载中...</span>
                      </div>
                    </div>
                    <div v-else-if="recentPosts.length === 0" class="no-posts">
                      <p>暂无最新帖子</p>
                    </div>
                    <div v-else>
                      <div 
                        v-for="(post, index) in recentPosts" 
                        :key="post.id" 
                        class="sidebar-item"
                        @click="viewJobDetail(post.id)"
                        style="position: relative;"
                      >
                        <div class="post-rank" v-if="index < 3">{{ index + 1 }}</div>
                        <h6 class="post-title">{{ post.jobTitle || '无标题' }}</h6>
                        <div class="post-meta">
                          <span class="time">{{ formatTime(post.createdAt) }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, } from 'vue'
import { useRouter } from 'vue-router'

import { getInternshipJobList } from '@/api/Internship.js'

const router = useRouter()

// 搜索参数
const searchParams = reactive({
  keyword: '',
  jobType: '',
  industry: '',
  workLocation: '',
  workMode: '',
  educationRequirement: '',
  graduationYear: '',
  minSalary: null,
  maxSalary: null,
  jobTags: ''
})

// 排序方式
const sortBy = ref('createTime')

// 加载状态
const loading = ref(false)
const loadingMore = ref(false)
const hotPostsLoading = ref(false)
const recentPostsLoading = ref(false)

// 分页相关
const pageSize = ref(6) // 每页显示6个职位
const currentPage = ref(1)
const jobsList = ref(null)

// 数据
const allJobs = ref([])// 所有职位列表
const hotPosts = ref([])// 热门帖子
const recentPosts = ref([])// 最近帖子

// 计算属性：筛选后的职位列表
const filteredJobs = computed(() => {
  let filtered = [...allJobs.value]

  // 关键词搜索
  if (searchParams.keyword) {
    const keyword = searchParams.keyword.toLowerCase()
    filtered = filtered.filter(job => 
      job.jobTitle?.toLowerCase().includes(keyword) ||
      job.companyName?.toLowerCase().includes(keyword) ||
      job.jobDescription?.toLowerCase().includes(keyword)
    )
  }

  // 工作类型筛选
  if (searchParams.jobType) {
    filtered = filtered.filter(job => job.jobType === searchParams.jobType)
  }

  // 行业领域筛选
  if (searchParams.industry) {
    filtered = filtered.filter(job => job.industry === searchParams.industry)
  }

  // 工作地点筛选
  if (searchParams.workLocation) {
    filtered = filtered.filter(job => 
      job.workLocation?.includes(searchParams.workLocation)
    )
  }

  // 工作方式筛选
  if (searchParams.workMode) {
    filtered = filtered.filter(job => job.workMode === searchParams.workMode)
  }

  // 学历要求筛选
  if (searchParams.educationRequirement) {
    filtered = filtered.filter(job => 
      job.educationRequirement === searchParams.educationRequirement
    )
  }

  // 毕业年份筛选
  if (searchParams.graduationYear) {
    filtered = filtered.filter(job => 
      job.graduationYear?.includes(searchParams.graduationYear)
    )
  }

  // 薪资范围筛选
  if (searchParams.minSalary !== null) {
    filtered = filtered.filter(job => 
      job.minSalary >= searchParams.minSalary
    )
  }
  if (searchParams.maxSalary !== null) {
    filtered = filtered.filter(job => 
      job.maxSalary <= searchParams.maxSalary
    )
  }

  // 职位标签筛选
  if (searchParams.jobTags) {
    const tagKeyword = searchParams.jobTags.toLowerCase()
    filtered = filtered.filter(job => {
      const tags = getJobTags(job)
      return tags.some(tag => tag.toLowerCase().includes(tagKeyword))
    })
  }

  // 排序
  filtered.sort((a, b) => {
    switch (sortBy.value) {
      case 'createTime':
        return new Date(b.createTime) - new Date(a.createTime)
      case 'viewCount':
        return (b.viewCount || 0) - (a.viewCount || 0)
      case 'salary':
        return (b.maxSalary || 0) - (a.maxSalary || 0)
      default:
        return 0
    }
  })

  return filtered
})

// 计算属性：当前显示的职位
const displayedJobs = computed(() => {
  const startIndex = 0
  const endIndex = currentPage.value * pageSize.value
  return filteredJobs.value.slice(startIndex, endIndex)
})

// 计算属性：是否还有更多职位
const hasMoreJobs = computed(() => {
  return displayedJobs.value.length < filteredJobs.value.length
})

// 方法：处理滚动加载
const handleScroll = (event) => {
  const element = event.target
  // 检查是否滚动到底部
  if (element.scrollHeight - element.scrollTop <= element.clientHeight + 100) {
    loadMoreJobs()
  }
}

// 方法：加载更多职位
const loadMoreJobs = async () => {
  if (loadingMore.value || !hasMoreJobs.value) return
  
  loadingMore.value = true
  // 模拟加载延迟
  await new Promise(resolve => setTimeout(resolve, 500))
  
  currentPage.value += 1
  loadingMore.value = false
}

// 方法：处理搜索
const handleSearch = () => {
  // 重置分页
  currentPage.value = 1
  // 滚动到顶部
  if (jobsList.value) {
    jobsList.value.scrollTop = 0
  }
  console.log('搜索参数:', searchParams)
}

// 方法：重置筛选条件
const resetFilters = () => {
  Object.keys(searchParams).forEach(key => {
    if (key === 'minSalary' || key === 'maxSalary') {
      searchParams[key] = null
    } else {
      searchParams[key] = ''
    }
  })
  // 重置分页
  currentPage.value = 1
  if (jobsList.value) {
    jobsList.value.scrollTop = 0
  }
}

// 方法：获取工作类型文本
const getJobTypeText = (type) => {
  const types = {
    internship: '实习',
    part_time: '兼职',
    full_time: '全职'
  }
  return types[type] || type
}

// 方法：获取工作类型样式类
const getJobTypeClass = (type) => {
  const classes = {
    internship: 'internship',
    part_time: 'part-time',
    full_time: 'full-time'
  }
  return classes[type] || ''
}

// 方法：获取行业文本
const getIndustryText = (industry) => {
  const industries = {
    internet: '互联网/IT',
    finance: '金融/银行',
    education: '教育/培训',
    media: '媒体/广告',
    manufacturing: '制造业',
    service: '服务业',
    other: '其他'
  }
  return industries[industry] || industry
}

// 方法：获取工作方式文本
const getWorkModeText = (mode) => {
  const modes = {
    on_site: '现场办公',
    remote: '远程办公',
    hybrid: '混合办公'
  }
  return modes[mode] || mode
}

// 方法：获取学历要求文本
const getEducationText = (education) => {
  const educations = {
    none: '不限',
    high_school: '高中及以上',
    college: '大专及以上',
    bachelor: '本科及以上',
    master: '硕士及以上',
    doctor: '博士及以上'
  }
  return educations[education] || education
}

// 方法：获取薪资类型文本
const getSalaryTypeText = (salaryType) => {
  const types = {
    monthly: '月薪',
    hourly: '时薪',
    daily: '日薪',
    negotiable: '薪资面议',
    unpaid: '无薪'
  }
  return types[salaryType] || salaryType
}

// 方法：格式化薪资显示
const formatSalary = (job) => {
  if (job.salaryType === 'negotiable') return '薪资面议'
  if (job.salaryType === 'unpaid') return '无薪'
  
  const unit = getSalaryTypeText(job.salaryType)
  if (job.minSalary && job.maxSalary) {
    return `${job.minSalary} - ${job.maxSalary}元/${unit}`
  } else if (job.minSalary) {
    return `${job.minSalary}元/${unit}起`
  } else if (job.maxSalary) {
    return `${job.maxSalary}元/${unit}`
  }
  return '薪资面议'
}

// 方法：获取职位标签
const getJobTags = (job) => {
  if (Array.isArray(job.jobTags)) {
    return job.jobTags
  } else if (typeof job.jobTags === 'string') {
    try {
      return JSON.parse(job.jobTags)
    } catch {
      return []
    }
  }
  return []
}

// 方法：格式化时间
const formatTime = (time) => {
  if (!time) return ''
  const date = new Date(time)
  const now = new Date()
  const diff = now - date
  
  const minute = 60 * 1000
  const hour = minute * 60
  const day = hour * 24
  
  if (diff < hour) {
    return `${Math.floor(diff / minute)}分钟前`
  } else if (diff < day) {
    return `${Math.floor(diff / hour)}小时前`
  } else if (diff < day * 7) {
    return `${Math.floor(diff / day)}天前`
  } else {
    return date.toLocaleDateString()
  }
}

// 方法：查看职位详情
const viewJobDetail = (jobId) => {
  router.push(`/post/woekdetail/${jobId}`)
}

// 生命周期：组件挂载
onMounted(async () => {
  loading.value = true
  hotPostsLoading.value = true
  recentPostsLoading.value = true

  try {
    // 获取实习/兼职职位数据
    const jobsResponse = await getInternshipJobList()
    allJobs.value = jobsResponse.data || []
    
    // 获取热门职位（根据浏览量排序）
    const hotJobsResponse = await getInternshipJobList()
    const hotJobs = hotJobsResponse.data || []
    hotPosts.value = hotJobs
      .sort((a, b) => (b.viewCount || 0) - (a.viewCount || 0))
      .slice(0, 5)
    
    // 获取实习/兼职职位作为最近帖子
    const recentResponse = await getInternshipJobList()
    const recentJobs = recentResponse.data || []
    recentPosts.value = recentJobs
      .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
      .slice(0, 5)
    
    
  } catch (error) {
    console.error('获取数据失败:', error)
  } finally {
    loading.value = false
    hotPostsLoading.value = false
    recentPostsLoading.value = false
  }
})
</script>

<style scoped>
.work-container {
  background-color: #f8f9fa;
  min-height: 100vh;
}

/* 搜索区域样式 */
.search-section {
  background: linear-gradient(135deg,#55aac1, #62a0df );
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.search-card {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.search-title {
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
}

.search-input-group {
  display: flex;
  gap: 10px;
}

.search-input {
  flex: 1;
  border-radius: 25px;
  padding: 12px 20px;
  border: 2px solid #e9ecef;
  font-size: 1.1rem;
}

.search-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

.search-btn {
  border-radius: 25px;
  padding: 12px 30px;
  font-weight: 600;
  white-space: nowrap;
}

/* 筛选区域样式 */
.filter-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 1.5rem;
  position: sticky;
  top: 20px;
}

.filter-title {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1.5rem;
  padding-bottom: 15px;
  position: relative;
}

.filter-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #3498db, #2980b9);
  border-radius: 3px;
}

.filter-group {
  margin-bottom: 1.2rem;
}

.filter-label {
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.5rem;
  display: block;
}

.filter-select,
.filter-input {
  border-radius: 8px;
  border: 1px solid #dee2e6;
  padding: 8px 12px;
}

.salary-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.range-input {
  flex: 1;
}

.range-separator {
  color: #6c757d;
  font-weight: 600;
}

.filter-actions {
  display: flex;
  gap: 10px;
  margin-top: 1.5rem;
}

.apply-filter,
.reset-filter {
  flex: 1;
  border-radius: 8px;
  padding: 10px;
}

/* 职位列表样式 */
.jobs-section {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: calc(110vh - 50px);
  display: flex;
  flex-direction: column;
}

.jobs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}

.jobs-title {
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  padding-bottom: 15px;
  position: relative;
}

.jobs-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #3498db, #2980b9);
  border-radius: 3px;
}

.sort-select {
  width: auto;
  min-width: 120px;
}

.jobs-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 10px;
}

/* 自定义滚动条 */
.jobs-list::-webkit-scrollbar {
  width: 6px;
}

.jobs-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.jobs-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.jobs-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 移除旧的 jobs-grid 样式，使用 Bootstrap 网格系统 */

.job-card {
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  height: fit-content;
}

.job-card:hover {
  border-color: #3498db;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
  transform: translateY(-2px);
}

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.8rem;
}

.job-title {
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  flex: 1;
  font-size: 1.1rem;
  line-height: 1.3;
}

.job-type {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.job-type.internship {
  background: #e1f0fa;
  color: #3498db;
}

.job-type.part-time {
  background: #fff3cd;
  color: #856404;
}

.job-type.full-time {
  background: #d4edda;
  color: #155724;
}

.company-info {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.company-name {
  font-weight: 600;
  color: #495057;
}

.industry {
  color: #6c757d;
  font-size: 0.9rem;
}

.job-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #6c757d;
  font-size: 0.9rem;
}

.detail-item i {
  color: #3498db;
  width: 16px;
}

.salary-tags {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.salary {
  font-weight: 600;
  color: #e74c3c;
  font-size: 1.1rem;
}

.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  background: linear-gradient(135deg, #e1f0fa, #d1e7ff);
  color: #3498db;
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 0.8rem;
  border: 1px solid #bbd7f0;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.1);
}

.job-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.8rem;
  border-top: 1px solid #f8f9fa;
}

.post-info {
  display: flex;
  gap: 1rem;
  color: #6c757d;
  font-size: 0.85rem;
}

.urgent-badge {
  background: #e74c3c;
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* 加载更多样式 */
.load-more {
  text-align: center;
  padding: 1.5rem;
  color: #6c757d;
}

.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(-3px);
  }
}

.no-more-jobs {
  text-align: center;
  padding: 1.5rem;
  color: #28a745;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 底部帖子区域样式 */
.posts-section {
  margin-top: 2rem;
}

.sidebar-card {
  background: linear-gradient(135deg, #ffffff, #f8f9fa);
  border-radius: 15px;
  padding: 1.5rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  height: 100%;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.sidebar-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}

.sidebar-header {
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid #e9ecef;
}

.sidebar-title {
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
}

.sidebar-title i {
  font-size: 1.3rem;
}

.sidebar-content {
  max-height: 350px;
  overflow-y: auto;
  padding-right: 5px;
}

/* 自定义滚动条 */
.sidebar-content::-webkit-scrollbar {
  width: 6px;
}

.sidebar-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.sidebar-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.sidebar-item {
  padding: 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 0.8rem;
  background: white;
  border: 1px solid #eef2f7;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.sidebar-item:last-child {
  margin-bottom: 0;
}

.sidebar-item:hover {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  transform: translateX(5px);
  border-color: #90caf9;
}

.post-title {
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  color: #7b8a8b;
  font-size: 0.85rem;
  font-weight: 500;
}

.views {
  background: #e1f0fa;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #3498db;
}

.time {
  background: #f8f9fa;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  color: #6c757d;
}

.post-rank {
  position: absolute;
  top: -5px;
  left: -5px;
  background: linear-gradient(135deg, #ffd700, #ffa500);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.7rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 1;
}

/* 加载和空状态样式 */
.loading-spinner {
  display: flex;
  justify-content: center;
  padding: 3rem;
}

.loading-small {
  display: flex;
  justify-content: center;
  padding: 1rem;
}

.no-results {
  text-align: center;
  padding: 3rem 1rem;
  color: #6c757d;
}

.no-results-icon {
  font-size: 3rem;
  color: #dee2e6;
  margin-bottom: 1rem;
}

.no-results-text {
  margin-bottom: 1.5rem;
}

.no-posts {
  text-align: center;
  padding: 1rem;
  color: #6c757d;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-input-group {
    flex-direction: column;
  }
  
  .jobs-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .sort-select {
    width: 100%;
  }
  
  .job-header {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .jobs-grid {
    grid-template-columns: 1fr;
  }
  
  .jobs-section {
    height: auto;
    max-height: 70vh;
  }
}
</style>